<script>
import axios from 'axios';

export default {
  data() {
    return {
      recentEdits: [], // 用于存储从后端获取的数据
    };
  },
  mounted() {
    this.fetchRecentEdits(); // 组件挂载时调用接口
  },
  methods: {
    fetchRecentEdits() {
      axios.get('/recentEdit').then((response) => {
        this.recentEdits = response.data.data; // 将从后端获取的数据赋值给 recentEdits
        console.log(response.data.data);
      })
    },
  },
};
</script>

<template>
  <div class="recent-edit-container">
    <h2>最近编辑</h2>
    <ul class="edit-list">
      <li v-for="(edit, index) in recentEdits" :key="index" class="edit-item">
        {{ edit.updateEditor }} 于 {{ edit.updateTime }} 编辑了 {{ edit.contentCategory }} 类别的
        <span style="color: blue;">{{ edit.contentTitle }}</span> 的
        <span style="color: red;">{{ edit.updateOperation }}</span> 部分
      </li>
    </ul>
  </div>
</template>

<style scoped>
h2 {
  margin-bottom: 20px; /* 标题与列表之间的间距 */
  line-height: 25px; /* 设置行高 */
  text-align: left;
}

.recent-edit-container {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.edit-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.edit-item {
  display: block; /* 让每个 edit-item 块独占一行 */
  padding: 10px;
  color: #333;
  word-break: break-all; /* 防止长单词溢出 */
  line-height: 25px; /* 设置行高 */
  margin-bottom: 5px; /* 设置每个块之间的上下间距 */
  text-align: left; /* 文本左对齐 */
}

.edit-item:last-child {
  margin-bottom: 0; /* 去掉最后一个块的底部间距 */
}

/* 暗黑模式下的样式 */
[data-theme="dark"] .recent-edit-container {
  background-color: black; /* 背景变为黑色 */
  color: white; /* 文字变为白色 */
}

[data-theme="dark"] .edit-item {
  color: white; /* 文字变为白色 */
}

[data-theme="dark"] .edit-item span {
  color: white; /* 特殊文字也变为白色 */
}

[data-theme="dark"] h2 {
  color: white; /* 标题文字变为白色 */
}
</style>